import React, { useState } from 'react'
import { Modal, Button, Table, Radio, Divider } from 'antd'
import '../assets/styles/Ystepones.less'
import { instance } from '../../../api/request'
import { history } from 'umi'

export default function seckillAdd(props: any) {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [dataSource, setdataSource] = useState([])
    const [checked, setchecked] = useState({})
    const [actId, setactID] = useState()
    React.useEffect((): any => {


        findData()
    }, [])

    async function findData() {
        const res = await instance.get('/shopBoth/findAll')


        res.data.forEach((item: any, index: any) => {
            item.key = index
        })
   

        setdataSource(res.data)

    }
    function handleCancel() {
        setIsModalVisible(false)
    }

    function showModal() {
        setIsModalVisible(true)
    }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title: '商品图',
            dataIndex: 'surfaceplot',
            render: (_: any, record: any) => {
                return <>
                    <div style={{ display: 'flex' }}>
                        <img style={{ width: '4rem', height: '4rem', marginRight: '0.5rem' }} src={record.surfaceplot} />
                    </div>
                </>
            }
        },
        {
            title: '商品名称',
            dataIndex: 'designation',
        },
    ];


   
    const rowSelection = {
        // 第一个
        onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
            //第一个是下标 第二个是点击是数组
            selectedRows.forEach((item: any) => {
                
                const obj: any = history.location.query
                var timeId: any = obj.id
                const objs: any = item
                objs.actId = timeId
    
                setchecked(objs)
            });

        },

    }
    function confirm() {
     
        history.push({
            pathname: '/Ystepone',
            query:checked ,
        })
        setIsModalVisible(false)
    }




    return (
        <div className="Ystepones">
            {/* 商品添加的第一步 */}
            <div className="top1">
                <Button type="primary" onClick={() => showModal()}>选择商品</Button>
                <Modal title="选择商品" visible={isModalVisible} onCancel={() => handleCancel()} footer={[]}>

                    <Table rowSelection={{

                        ...rowSelection,
                    }} columns={columns} dataSource={dataSource} />
                    <Button type="primary" onClick={confirm}>确定</Button>
                </Modal>
            </div>
        </div>
    )
}